<template>
  <section class="chart-container">
    <div class="select_top">
      <el-date-picker
        style="width:15%;margin-right:1%"
        v-model="year"
        type="year"
        placeholder="选择年"
        :clearable="false"
        valueFormat="yyyy"
      >
      </el-date-picker>
      <el-button @click="getsaList">筛选</el-button>
      <el-button @click="doexportExcel2">导出</el-button>
    </div>
    <div class="sa_title">
      项目进度表
    </div>
    <!-- @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter"
      :cellClassName="tableRowClassName" -->
    <el-table
      :data="saList"
      border
      id="tableexcel2"
      :spanMethod="objectSpanMethod"
      style="width:92%; margin:20px auto;text-align:center"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.normtype"
        label="321工程"
      >
      </el-table-column>
      <el-table-column
        label="整治行动"
      >
        <el-table-column
          prop="hash.nname"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="hash.typename"
          label="具体"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="hash.allproj"
        label="项目数量"
      >
      </el-table-column>
      <el-table-column
        prop="hash.projcount"
        label="子行动项目"
      >
      </el-table-column>
      <el-table-column
        prop="hash.projyear"
        label="其中：跨年度项目"
      >
      </el-table-column>
      <el-table-column
        label="子行动推进情况"
      >
        <el-table-column
          prop="hash.proj1"
          label="完成"
        >
        </el-table-column>
        <el-table-column
          prop="hash.proj2"
          label="整治中"
        >
        </el-table-column>
        <el-table-column
          prop="hash.proj3"
          label="前期工作"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="子行动完成率(百分比%)"
      >
        <el-table-column
          prop="hash.nproj1"
          label="完成"
        >
        </el-table-column>
        <el-table-column
          prop="hash.nproj2"
          label="整治中"
        >
        </el-table-column>
        <el-table-column
          prop="hash.nproj3"
          label="前期工作"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="hash.orgname"
        label="牵头部门"
      >
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      ts: this.newStore(),
      year: '',
      saList: [],
      rowIndex: '-1',
      OrderIndexArr: [],
      OrderIndexArr2: [],
    };
  },
  mounted() {
    // 去除hover效果
    setTimeout(() => {
      const obj = document.getElementsByClassName('el-table--enable-row-hover')[0];
      let clz = obj.getAttribute('class');
      clz = clz.replace('el-table--enable-row-hover', '');
      obj.setAttribute('class', clz);
    }, 1);
  },
  created() {
    this.year = `${new Date().getFullYear()}`;
    this.getsaList();
  },
  methods: {
    doexportExcel2() {
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(document.querySelector('#tableexcel2'));
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '项目清单汇总表.xlsx');
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout); }
      return wbout;
    },
    // tableRowClassName({ row, rowIndex }) {
    //   const arr = this.hoverOrderArr;
    //   const arr2 = this.hoverOrderArr2;
    //   for (let i = 0; i < arr.length; i += 1) {
    //     if (rowIndex == arr[i]) {
    //       return 'hovered-row';
    //     }
    //   }
    //   for (let i = 0; i < arr2.length; i += 1) {
    //     if (rowIndex == arr2[i]) {
    //       return 'hovered-row';
    //     }
    //   }
    // },
    getOrderNumber() {
      const OrderObj = {};
      const OrderObj2 = {};
      this.saList.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.hash.nname]) {
          OrderObj[element.hash.nname].push(index);
        } else {
          OrderObj[element.hash.nname] = [];
          OrderObj[element.hash.nname].push(index);
        }
      });
      this.saList.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj2[element.hash.normtype]) {
          OrderObj2[element.hash.normtype].push(index);
        } else {
          OrderObj2[element.hash.normtype] = [];
          OrderObj2[element.hash.normtype].push(index);
        }
      });

      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (const k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
      for (const k in OrderObj2) {
        if (OrderObj2[k].length > 1) {
          this.OrderIndexArr2.push(OrderObj2[k]);
        }
      }
    },


    // 合并单元格
    objectSpanMethod({
      row, column, rowIndex, columnIndex,
    }) {
      if (columnIndex == 2 || columnIndex === 5 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13) {
        for (let i = 0; i < this.OrderIndexArr.length; i += 1) {
          const element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j += 1) {
            const item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
      if (columnIndex == 1) {
        for (let i = 0; i < this.OrderIndexArr2.length; i += 1) {
          const element = this.OrderIndexArr2[i];
          for (let j = 0; j < element.length; j += 1) {
            const item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
    },
    // cellMouseEnter(row, column, cell, event) {
    //   this.rowIndex = row.rowIndex;
    //   this.hoverOrderArr = [];
    //   this.hoverOrderArr2 = [];
    //   this.OrderIndexArr.forEach((element) => {
    //     if (element.indexOf(this.rowIndex) >= 0) {
    //       this.hoverOrderArr = element;
    //     }
    //   });
    //   this.OrderIndexArr2.forEach((element) => {
    //     if (element.indexOf(this.rowIndex) >= 0) {
    //       this.hoverOrderArr = element;
    //     }
    //   });
    // },

    // cellMouseLeave(row, column, cell, event) {
    //   this.rowIndex = '-1';
    //   this.hoverOrderArr = [];
    //   this.hoverOrderArr2 = [];
    // },
    getsaList() {
      const req = {
        handle: '897AEEB66312B81B368784114B8B87D725340A5F8948FBDC',
        year: this.year,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.saList = ts.d.data.operation1;
        this.getOrderNumber();
      });
    },
  },
};
</script>

<style lang="stylus">
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #fff !important;
}
.el-table th>.cell
  text-align center
.chart-container
  min-height 100vh
  background #f1f1f1
  width: 100%;
  float: left;
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.sa_title
  text-align center
  font-size 20px
  border-top 1px solid #cccccc
  padding-top 20px
  margin 20px auto
  width 92%
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>

